<div class="layui-card layadmin-header">
  <div class="layui-breadcrumb" lay-filter="breadcrumb">
    <a><cite>活动管理</cite></a>
    <a><cite>抽奖活动列表</cite></a>
  </div>
</div>

<div class="layui-fluid">
  <div class="layui-card">
    <div class="layadmin-search">
      <form class="layui-form" method="post" lay-filter="form_lottery_search" id="filterForm">
        <script type="text/html" template lay-done="layui.data.done()">
          <div class="layui-inline">
            <div class="layui-form-label">关键字搜索</div>
            <div class="layui-input-inline">
              <input type="text" name="keyword" value="{{decodeURIComponent(layui.router().search.keyword || '')}}"
                     class="layui-input"
                     placeholder="请输入活动名称关键字">
            </div>
          </div>
          <div class="layui-inline layui-btn-group">
            <button type="submit" lay-submit class="layui-btn" lay-filter="submit_lottery_search">
              <i class="layui-icon layui-icon-search"></i>查询
            </button>
            <button type="submit" lay-submit class="layui-btn layui-btn-warm"
                    lay-filter="reset_lottery_search">
              <i class="layui-icon layui-icon-close"></i>重置
            </button>
          </div>
        </script>
        <a lay-href="lottery/create" class="layui-btn layui-btn-normal">
          <i class="layui-icon layui-icon-add-1"></i>创建抽奖活动
        </a>
      </form>
    </div>
    <div class="layui-card-body">
      <div id="table_lottery"></div>
      <script type="text/html" id="tpl_avatar">
        {{# if (d.avatar_url) { }}
        <img style="width: 35px" src="{{d.avatar_url}}" layadmin-event="imagePreview">
        {{# } }}
        {{d.nickname || ''}}
      </script>
      <script type="text/html" id="tpl_name">
        {{d.name}}
      </script>
      <script type="text/html" id="tpl_range">
        {{# let ongoing_status = d.ongoing_status.value }}
        {{# if(ongoing_status==='on_going') {  }}
        <span class="layui-badge layui-bg-green">进行中</span>
        {{# } else if (ongoing_status==='not_start') { }}
        <span class="layui-badge layui-bg-gray">未开始</span>
        {{# } else { }}
        <span class="layui-badge layui-bg-red">已结束</span>
        {{# } }}
        {{ d.start_time }} ~ {{ d.end_time }}
      </script>
      <script type="text/html" id="tpl_status">
        {{# if (d.status.value === 'enabled') { }}
        <span class="layui-font-green">开启</span>
        {{# } }}
        {{# if (d.status.value === 'disabled') { }}
        <span class="layui-font-red">未开启</span>
        {{# } }}
      </script>
      <script type="text/html" id="tpl_tool">
        <a class="layui-table-link" lay-href="lottery/user/id={{d.id}}">
          <i class="layui-icon layui-icon-group" style="font-size: 14px"></i>
          名单
        </a>
        <p class="ant-divider"></p>
        <a class="layui-table-link" lay-href="lottery/record/id={{d.id}}">
          <i class="layui-icon layui-icon-table"></i>
          记录
        </a>
        <div class="ant-divider"></div>
        <a class="layui-table-link" lay-href="lottery/create/id={{d.id}}">
          <i class="layui-icon layui-icon-edit"></i>
          {{d.status.value === 'disabled' ? '编辑' : '查看' }}
        </a>
        {{# if (d.status.value === 'enabled') { }}
        <div class="ant-divider"></div>
        <a class="layui-table-link layui-font-orange" lay-event="close">
          <i class="layui-icon layui-icon-pause"></i>
          暂停
        </a>
        {{# } }}
        {{# if (d.status.value === 'disabled') { }}

        <div class="ant-divider"></div>
        <a class="layui-table-link layui-font-red" lay-event="del">
          <i class="layui-icon layui-icon-delete"></i>
          删除
        </a>
        <div class="ant-divider"></div>
        <a class="layui-table-link" lay-event="open">
          <i class="layui-icon layui-icon-play"></i>
          开启
        </a>
        {{# } }}
      </script>
    </div>
  </div>
</div>

<script>
  layui.data.done = function () {
    layui.use(['fox_table', 'dropdown'], function () {
      let $ = layui.$
        , fox_table = layui.fox_table
        , layer = layui.layer
        , admin = layui.admin
        , form = layui.form
        , view = layui.view


      let resourceUrl = 'agent-admin/lotteries'
      // 列表查询
      fox_table.render({
        id: 'table_lottery'
        , url: resourceUrl
        , cols: [[
          {title: 'ID', field: 'id', width: 80, align: "center", sort: true}
          , {title: '活动名称', templet: '#tpl_name', minWidth: 100}
          , {title: '起止时间', templet: '#tpl_range', width: 400, align: "center"}
          , {title: '状态', templet: '#tpl_status', width: 80, align: "center"}
          , {title: '操作', width: 400, align: 'left', fixed: 'right', toolbar: '#tpl_tool'}
        ]]
      });


      //监听操作栏
      fox_table.toolbar(function (obj) {
        let data = obj.data;
        if (obj.event === 'del') {
          layer.confirm('确认删除该数据?', function (index) {
            admin.del('agent-admin/lotteries', data.id, function (res) {
              layer.close(index);
              fox_table.reload(); //重载表格
            })
          });
        }
        if (obj.event === 'close') {
          layer.confirm('确认暂停该活动?', function (index) {
            admin.post('agent-admin/lotteries/' + data.id + '/close', {}, function (res) {
              layer.close(index);
              fox_table.reload(); //重载表格
            })
          });
        }

        if (obj.event === 'open') {
          layer.confirm('确认启动该活动?', function (index) {
            admin.post('agent-admin/lotteries/' + data.id + '/open', {}, function (res) {
              layer.close(index);
              fox_table.reload(); //重载表格
            })
          });
        }
      });

      //搜索
      form.on('submit(submit_lottery_search)', function (d) {
        fox_table.reload(d.field);
        return false;
      });
      //重置
      form.on('submit(reset_lottery_search)', function (d) {
        $("input[name='keyword']").val('');
        fox_table.reload({});
        return false;
      });
    })
  }
</script>

